<template>
	<view>
		<view class="manage-bigbox">
			<view class="add-padding" v-for="(items,index) in channelArray" :key="index">
				<view class="manage-list flex">
					<view class="manage-list-title">
						<view class="channel-title">{{items.title}}</view>
						<view class="flex">
							<view class="channel-name">{{items.name}}</view>
							<view class="channel-phone">{{items.phone}}</view>
						</view>
					</view>
					<view class="flex">
						<view class="delect-btn"><img src="../../static/icon/icon_trash.png" alt="" class="img-sty"></view>
						<view class="change-btn"><img src="../../static/icon/icon_edit.png" alt="" class="img-sty"></view>
					</view>
				</view>
			</view>
			<view class="bottom-btn" @tap="handleClickAddSource">
				+渠道
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			channelArray:{
				type:Array,
			}
		}
	}
</script>

<style scoped lang="stylus">
	.manage-bigbox{
		margin-top:24upx;
		.add-padding{
			padding:0 40upx;
			background:#fff;
			.manage-list{
				height:160upx;
				align-items:center;
				justify-content:space-between;
				border-bottom:1px solid #DBDBDB;
				.manage-list-title{
					font-size:32upx;
					color:#333;
					.channel-title{
						font-size:32upx;
						font-weight:400;
						color:rgba(51,51,51,1);
						margin-bottom:16upx;
					}
					.channel-name{
						font-size:28upx;
						font-weight:400;
						color:rgba(102,102,102,1);
						margin-right:22upx;
					}
					.channel-phone{
						font-size:28upx;
						font-weight:400;
						color:rgba(102,102,102,1);
					}
				}
				.delect-btn{
					margin-right:44upx;
				}
				.img-sty{
					height:38upx;
					width:38upx;
				}
			}
		}
		.bottom-btn{
			height:76upx;
			width:440upx;
			background:linear-gradient(270deg,rgba(0,106,231,1) 0%,rgba(66,157,255,1) 100%);
			line-height:76upx;
			text-align:center;
			color:#fff;
			font-size:32upx;
			margin:80upx auto;
		}
	}
</style>
